<template>
  <div class="scale-contents" v-if="scale.deviceName">
    <el-row class="scale-content__row" justify="space-between">
      <el-col :span="12">
        <item-wrap box-name="dv-border-box13" :title="scale.deviceName +'-基础数据'" class="scale-content__col">
          <top-left :device-id="page"/>
        </item-wrap>
      </el-col>
      <el-col :span="12" class="scale-contents__right">
        <item-wrap box-name="dv-border-box13" :title="scale.deviceName +'-视频监控'" class="scale-content__col">
          <video-player v-if="cameraList.length > 0" :device-id="cameraList[0].id" style="height: 97%;width: 100%" />
        </item-wrap>
      </el-col>
    </el-row>
    <el-row class="scale-content__row" justify="space-between" align="bottom">
      <el-col :span="12">
        <item-wrap box-name="dv-border-box13" :title="scale.deviceName +'-煤流瞬时图'" class="scale-content__col">
          <bottom-left :device-id="page"/>
        </item-wrap>
      </el-col>
      <el-col :span="12" class="scale-contents__right">
        <item-wrap box-name="dv-border-box13" :title="scale.deviceName +'-煤流瞬时值趋势图'" class="scale-content__col">
          <bottom-right :device-id="page"/>
        </item-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { GET_RESTFUL } from '@/api'
import TopLeft from "./top-left"
import BottomLeft from "./bottom-left"
import BottomRight from "./bottom-right"


const props = defineProps({
  page: {
    type: String,
    default: '',
    required: true
  }
})

const scale = ref({})

const cameraList = ref<Camera[]>([])

onMounted(()=>{
  getScale()
  getCameraList()
})

onBeforeUnmount(()=>{
})

watch(
    () => props.page,
    (val: any) => {
      fetchData()
    }
)

function fetchData(){
  getScale()
  getCameraList()
}

function getCameraList(){
  cameraList.value = []
  GET_RESTFUL('getCamera',props.page).then(resp=>{
    cameraList.value = resp.data;
  })
}

function getScale(){
  GET_RESTFUL('getDeviceInfo',props.page).then(resp=>{
    scale.value = resp.data
  })
}
</script>


<style scoped lang="scss">
.scale-contents {

  width: 100%;
  min-height: calc(100% - 60px);
  height: 960px;
  margin-top: 10px;
  .scale-content__row{
    width: 100%;
    height: 480px;
    .scale-content__col {
      margin-right: 0;
      height: 470px;
      width: 860px;
    }

    .scale-contents__right {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
    }
  }

}
</style>